<template>
    <div class="wrapper">
        <!-- Header Area Start Here -->
        <header class="header-area">
            <div class="header-top">
                <div class="container">
                    <div class="row align-items-center text-center text-md-left">
                        <!-- Logo Start -->
                        <div class="col-md-3 col order-1 order-md-1 mb-sm-30">
                            <div class="logo">
                                <NuxtLink to="/"><img src="~/assets/images/logo/logo.png" alt="logo-img"></NuxtLink>
                            </div>
                        </div>
                        <!-- Logo End -->
                        <!-- Search Box Start Here -->
                        <div class="col-md-6  order-3 order-md-2">
                            <div class="categorie-search-box">
                                <!-- <form action="#"> -->
                                    <input type="text" v-model="searchVal" name="search" placeholder="Search your keyword">
                                    <button @click="goSearch">
                                        <span class="ti-search"></span>
                                    </button>
                                <!-- </form> -->
                            </div>    
                        </div>
                        <!-- Search Box End Here -->
                    </div>
                </div>
            </div>
            <div class="header-bottom blue-bg header-sticky">
                 <div class="container">
                        <div class="row align-items-center">
                            <!-- Menu Area Start Here -->
                            <div class="col-lg-10 d-none d-lg-block">
                                <nav>
                                    <ul class="header-menu-list">
                                        <li class="active">
                                            <NuxtLink to="/">Home</NuxtLink>
                                        </li>
                                        <li v-for="item in columnList" :key="item.id" :class="{ 'has-dropdown': item.children }">
                                            <NuxtLink :class="{ 'drop-icon': item.children }" v-if="item.type === 'list'" :to="`/${item.template}/list/${item.id}/1`">{{ item.title }}</NuxtLink>
                                            <NuxtLink :class="{ 'drop-icon': item.children }" v-else :to="`/${item.template}/${item.id}`">{{ item.title }}</NuxtLink>
                                            <ul class="ht-dropdown" v-if="item.children">
                                                <li v-for="cItem in item.children" :key="cItem.id">
                                                    <NuxtLink v-if="cItem.type === 'list'" :to="`/${cItem.template}/list/${cItem.id}/1`">{{ cItem.title }}</NuxtLink>
                                                    <NuxtLink v-else :to="`/${cItem.template}/${cItem.id}`">{{ cItem.title }}</NuxtLink>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            <!-- Menu Area End Here -->
                            <!-- Cart Box Start Here -->
                            <div class="col-lg-2">
                                <div class="setting-box float-right">
                                    <ul>
                                        <li class="drodown-show"><a href="#"><span class="ti-settings"></span></a>
                                            <!-- Currency & Language Selection Start -->
                                            <ul class="dropdown cart-box-width currency-selector">
                                                <li>
                                                    <h3>My Account </h3>
                                                    <ul>
                                                        <li v-if="!isLogin"><NuxtLink to="/register">Register</NuxtLink></li>
                                                        <li v-if="!isLogin">
                                                            <NuxtLink to="/login">Login</NuxtLink>
                                                        </li>
                                                        <li v-if="isLogin"><NuxtLink to="/user">My Account</NuxtLink></li>
                                                    </ul>
                                                </li>
                                             </ul>
                                            <!-- Currency & Language Selection End -->
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- Cart Box End Here -->
                        </div>
                        <!-- Row End -->
                        <!-- Mobile Menu Start Here -->
                        <div class="phone-menu">
                            <div :class="{ 'mobile-menu-bar': true, cur: isShowMobileMenu }" @click="showMeanBar">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div :class="{ 'mean-bar': true, show: isShowMobileMenu }">
                                <nav>
                                    <ul>
                                        <li>
                                            <NuxtLink to="/">Home</NuxtLink>
                                        </li>
                                        <li v-for="item in columnList" :key="item.id">
                                            <NuxtLink v-if="item.type === 'list'" :to="`/${item.template}/list/${item.id}/1`">{{ item.title }}</NuxtLink>
                                            <NuxtLink v-else :to="`/${item.template}/${item.id}`">{{ item.title }}</NuxtLink>
                                            <ul v-if="item.children">
                                                <li v-for="cItem in item.children" :key="cItem.id">
                                                    <NuxtLink :to="`/${item.template}/list/${cItem.id}/1`">{{ cItem.title }}</NuxtLink>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <!-- Mobile Menu End Here -->
                </div>
                 <!-- Container End -->
            </div>
        </header>
        <!-- Header Area End Here -->

        <NuxtPage />
        
        <!-- Footer Area Start Here -->
        <footer class="footer-area black-bg pt-60">
            <div class="container">
                <div class="footer-top">
                    <div class="footer-logo text-center">
                        <a href="index.html"><img src="~/assets/images/logo/logo2.png" alt="footer-logo"></a>
                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
                    </div>
                    <!-- Support Area Start Here -->
                    <div class="support-area d-flex flex-wrap justify-content-between">
                        <!-- Single Support Area Start Here -->
                        <div class="single-support mb-all-40">
                            <div class="support-icon">
                                <img src="~/assets/images/support/s1.png" alt="support-icon">
                            </div>
                            <div class="support-desc">
                                <h6>Free Shipping</h6>
                                <p>Most product are free <br> shipping.</p>
                            </div>
                        </div>
                        <!-- Single Support Area End Here -->
                        <!-- Single Support Area Start Here -->
                        <div class="single-support mb-all-40">
                            <div class="support-icon">
                                <img src="~/assets/images/support/s2.png" alt="support-icon">
                            </div>
                            <div class="support-desc">
                                <h6>Customer Support</h6>
                                <p>24x7 Customer Support</p>
                            </div>
                        </div>
                        <!-- Single Support Area End Here -->
                        <!-- Single Support Area Start Here -->
                        <div class="single-support">
                            <div class="support-icon">
                                <img src="~/assets/images/support/s3.png" alt="support-icon">
                            </div>
                            <div class="support-desc">
                                <h6>Secure Payment</h6>
                                <p>Most Secure Payment <br> for customer.</p>
                            </div>
                        </div>
                        <!-- Single Support Area End Here -->
                    </div>
                    <!-- Support Area End Here -->
                </div>
                <div class="footer-middle ptb-60">
                    <div class="row">
                        <!-- Single Footer Start -->
                        <div class="col-lg-2 col-md-6 mb-all-40">
                            <div class="single-footer">
                                <h4 class="footer-title e-header">quick link</h4>
                                <div class="footer-content">
                                    <ul class="footer-list quick-link">
                                        <li v-for="item in columnList" :key="item.id">
                                            <NuxtLink :to="`/${item.template}/list/${item.id}/1`">{{ item.title }}</NuxtLink>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- Single Footer End -->
                        <!-- Single Footer Start -->
                        <div class="col-lg-3 col-md-6 mb-sm-40">
                            <div class="single-footer">
                                <h4 class="footer-title e-header">contact info</h4>
                                <div class="footer-content">
                                    <ul class="footer-list contact-info">
                                        <li class="location">
                                            <p>{{ siteDetail.address }}</p>
                                        </li>
                                        <li class="mail">
                                            <p>{{ siteDetail.email }}</p>
                                        </li>
                                        <li class="phone">
                                            <p>{{ siteDetail.phone }}</p>
                                        </li>
                                        <li class="wechat">
                                            <p>{{ siteDetail.wechat }}</p>
                                        </li>
                                        <li class="skype">
                                            <p>{{ siteDetail.skype }}</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- Single Footer End -->
                        <!-- Single Footer Start -->
                        <div class="col-lg-3 col-md-6">
                            <div class="single-footer">
                                <h4 class="footer-title e-header">newsletter</h4>
                                <div class="footer-content">
                                    <ul class="footer-list newsletter-text">
                                        <li>
                                            <h5 class="e-header">Social Icon</h5>
                                            <ul class="footer-social d-inline-flex mt-30">
                                                <li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- Single Footer End -->
                    </div>
                </div>
            </div>
            <div class="footer-bottom text-center ptb-15 off-black-bg">
                <p class="copyright">Copyright©  All right reserved</p>
            </div>
        </footer>
        <!-- Footer Area End Here -->
    </div>
</template>

<script lang="ts" setup>
    import { IColumnThree } from 'models/IColumn'
    import { useDialog, useMessage } from 'naive-ui'

    // 手机端导航显示
    const isShowMobileMenu = ref(false)
    const showMeanBar = () => {
        isShowMobileMenu.value = isShowMobileMenu.value ? false : true;
    }

    // 监听路由变化，切换页面后自动关闭菜单
    const route = useRoute()
    watch(() => route.path, () => {
        getPlatform() === 'Mobile' && closeMenu();
        isShowMobileMenu.value = false
        getIsLogin()
    })
    //#endregion
    
    //#region == 电脑端导航菜单动效控制 ==
    const opacity = ref(1)
    const isTransparent = ref(false)

    // 向上滚动时显示，到达顶部，背景设为透明，通过样式 header 控制
    const scrollUp = (scrollTop: number) => {
        opacity.value = 1
        isTransparent.value = scrollTop > 150
    }

    // 向下滚动时隐藏
    const scrollDown = (_: number) => {
        opacity.value = 0
    }

    onMounted(() => { 
        scrollDirection(scrollUp, scrollDown);
        nextTick(() => {
            getIsLogin();
        })
    })
    //#endregion

	const articleCount = ref(0)
	const categoryCount = ref(0)
	const getCount = async () => {
		if (getPlatform() === 'Mobile') {
			await nextTick(async () => {
            })
		}
	}
	getCount()
    const isLogin = ref(false);
    // 是否已经登录
    const getIsLogin = async () => {
        if (!getStorage('userInfo')) {
            isLogin.value = false;
        } else {
            isLogin.value = true;
        }
        if (!window.location.href.includes('localhost')) {
            // 不在本地开发的则存储
            if (!getAccessStorage('accessPage', window.location.href)) {
                const userInfo = getStorage('userInfo');
                const params = {
                    userId: userInfo ? userInfo.id : '',
                    userName: userInfo ? userInfo.name : '游客',
                    userEmail: userInfo ? userInfo.email : '',
                    accessPage: window.location.href,
                    sourceSite: document.referrer === '' ? '链接直接打开' : document.referrer,
                    district: '',
                    accessEquipment: getPlatform() === 'Mobile' ? '手机端' : '电脑端',
                    contentId: route.params.id && route.path.includes('product') ? route.params.id : '0',
                    isContent: route.params.id && route.path.includes('product') ? 1 : 0
                }
                const { code, data, error, msg } = await $https({
                    method: "POST",
                    url: 'clientWeb/access',
                    body: params
                })
                if (code === 200) {
                    setAccessStorage('accessPage', { url: window.location.href}, 10);
                }
            }
        }
    }
    
    // 提示去登录
    const toastShow = ref(false);
    const toastText = ref('');
    const dialog = useDialog();
    const message = useMessage();
    const goUser = async () => {
        if (!getStorage('userInfo')) {
            dialog.warning({
                title: 'Tips',
                content: 'You are not logged in, Please login',
                positiveText: 'Login now',
                negativeText: 'Next login',
                onPositiveClick: () => {
                    window.location.href = '/login'
                },
                onNegativeClick: () => {
                    console.log('取消按钮')
                }
            })
            return false
        }

        window.location.href = '/user'
    }

    // 跳转搜索页面
    const searchVal = ref('')
    const goSearch = () => {
        console.log(searchVal.value)
        window.open(`/search?search=${searchVal.value}`, "_blank")
    }

    // 栏目列表
    const result = await useServerRequest('clientWeb/columnAllList')
	const columnList = result

    // 网站信息
    const siteDetail = await useServerRequest(`clientWeb/webInfo`);
</script>
